<template>
  <view class="home u-flex-col">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="筛选"
      back-icon-color="#fff"
      title-color="#fff"
    ></u-navbar>

    <view class="u-p-l-20 u-p-r-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item
          :border-bottom="false"
          :label-style="labelStyle"
          label-position="top"
          label="时间"
          prop="beginDate"
        >
          <div class="time-body">
            <uni-datetime-picker
              :border="false"
              placeholder="请选择开始时间"
              :start="start"
              :end="end"
              return-type="timestamp"
              v-model="form.beginDate"
            />
          </div>
        </u-form-item>
        <u-form-item :border-bottom="false" label-position="top" prop="endDate">
          <div class="time-body">
            <uni-datetime-picker
              :border="false"
              placeholder="请选择结束时间"
              :start="start"
              :end="end"
              return-type="timestamp"
              v-model="form.endDate"
            />
          </div>
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button
        :hair-line="false"
        shape="circle"
        form-type="reset"
        :custom-style="formCustomStyle"
        throttle-time="500"
        @click="reset"
        >重置</u-button
      >
      <u-button
        :hair-line="false"
        shape="circle"
        :custom-style="formSubmitStyle"
        form-type="submit"
        throttle-time="500"
        @click="submit"
        >确定</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "screen",
  data() {
    return {
      form: {
        beginDate: "", //开始时间
        endDate: "", // 结束时间
      },
      labelStyle: {
        color: "#333333",
        fontWeight: "600",
      },
      searchData: {},
      formCustomStyle: {
        color: "#000",
        border: "1rpx solid #ddd",
        background: "#fff",
        width: "40%",
      },
      formSubmitStyle: {
        color: "#ffffff",
        background: "#288CFE",
        width: "40%",
        border: "none",
      },
      start: "",
      end: "",
    };
  },
  async mounted() {
    this.initTime();
  },
  methods: {
    /**
     * 初始时间范围
     */
    initTime() {
      const { show, showAlarmType } = this.form;
      if (show) {
        // alarm
      } else if (!show && showAlarmType) {
        // alarmConfirm
        const time = this.$getStartAndEndTimeByEndTime(Date.now(), 24);
        this.start = time.startTime;
        this.end = time.endTime;
      }
    },
    verification() {
      let isSubmit = false;
      const date = new Date(this.form.endDate);
      const dateStart = new Date(this.form.beginDate);
      if (date && dateStart && dateStart.getTime() > date.getTime()) {
        uni.showToast({
          title: "结束时间必须大于开始时间",
          icon: "none",
        });
        isSubmit = false;
      } else {
        isSubmit = true;
      }
      return isSubmit;
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            beginDate: this.form.beginDate ? this.$date(this.form.beginDate) : "",
            endDate: this.form.endDate ? this.$date(this.form.endDate) : "",
          };
          if (this.verification()) {
            uni.$emit(this.emitEvent, params);
            uni.navigateBack({
              delta: 1,
            });
          } else {
            return;
          }
        } else {
        }
      });
    },
    reset() {
      this.form = {
        ...this.form,
        beginDate: this.$date(Date.now()).substring(0, 11) + "00:00:00", //开始时间
        endDate: this.$date(Date.now()), // 结束时间
      };
      this.initTime();
      uni.$emit("handClickScreen", this.form);
    },
  },
  onLoad(options) {
    const { form, emitEvent, num } = options;
    if (form) {
      this.form = JSON.parse(form);
    }
    this.num = num;
    this.emitEvent = emitEvent;
    if (getApp().globalData.userInfo.superviseLevel === "50") {
      this.isCity = false;
    }
    this.form.countyNo = getApp().globalData.userInfo.countyNo;
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .form {
    /deep/.u-form-item {
      padding: 0;
    }
    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
    .summ {
      width: 100%;
      padding: 0rpx 28rpx;
      justify-content: space-between;
      > view {
        background: #fff;
        border-radius: 8rpx;
        text-align: center;
        color: #999;
        font-weight: bold;
        width: 48%;
        padding: 20rpx;
        > text {
          &:first-child {
            color: #3d5fff;
            padding-right: 10rpx;
          }
        }
      }
    }
  }
  .popup-content {
    padding: 24rpx;
    text-align: center;
    .checkbox {
      &-item {
        height: 100rpx;
        /deep/.u-checkbox__label {
          width: 100%;
          text-align: left;
        }
      }
      /deep/.u-checkbox-group {
        display: inline;
        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
      /deep/.u-radio-group {
        display: inline;
        .u-radio {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          height: 90rpx;
          .u-radio__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }
  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
</style>
